<template>
	<div class="registered" :class="state.isEdit ? 'edit' : ''">
		<template v-if="state.isEdit">
			<div class="top">
        <van-image class="avatar" round style="position: relative;" width="60px" height="60px" fit="cover" :src="mainStore.userInfo.head_img_url">
          <div class="update" @click="openShowAvatarPopup">更新</div>
        </van-image>
				<div class="user_info">
					<div>
						<span class="name">{{ mainStore.userInfo.username }}</span>
						<img v-if="showVip(mainStore.userInfo)" class="vip" src="@/assets/img/vip_icon.png" />
						<img
							v-if="mainStore.userInfo.is_vip_video"
							class="certification"
							src="@/assets/img/certification_icon.png"
						/>
					</div>
				</div>
			</div>
		</template>
		<template v-else>
			<header>
				<div class="user_info">
					<span class="name">用户注册</span>
					<p>资料完整度越高，匹配率越高哦~</p>
				</div>
			</header>
		</template>

		<div class="card" :style="{ 'margin-top': state.isEdit ? '0px' : '-85px' }">
			<div class="title"><span class="t_block"></span>个人信息</div>
			<div class="cell_box">
				<van-field v-model="form.username" label="姓名" placeholder="请输入" input-align="right" />
				<van-field v-model="state.my_mobile" label="电话" type="tel" placeholder="请输入" input-align="right" />
			</div>
		</div>

		<div class="card">
			<div class="title"><span class="t_block"></span>基本条件</div>
			<div class="cell_box">
				<van-cell title="性别" is-link :value="form.sex" @click="cellClick('性别')" />
				<van-cell title="年龄" is-link :value="form.age" @click="cellClick('年龄')" />
				<van-cell title="生日" is-link :value="form.birthday" @click="cellClick('生日')" />
				<van-cell title="月收入" is-link :value="form.income" @click="cellClick('月收入')" />
				<van-cell title="所在地区" is-link :value="state.areaValue" @click="cellClick('所在地区')" />
				<van-field v-model="form.address" label="详细地址" placeholder="请输入" input-align="right" />
				<van-field v-model="form.job" label="职业" placeholder="请输入" input-align="right" />
				<van-cell title="学历" is-link :value="form.educate" @click="cellClick('学历')" />
				<van-cell title="婚姻状况" is-link :value="form.marriage" @click="cellClick('婚姻状况')" />
				<van-cell title="身高" is-link :value="`${form.height}${form.height ? 'cm' : ''}`" @click="cellClick('身高')" />
				<van-cell title="体重" is-link :value="`${form.weight}${form.weight ? 'kg' : ''}`" @click="cellClick('体重')" />
<!--				<van-cell title="体型" is-link :value="form.shape" @click="cellClick('体型')" />-->
<!--				<van-cell-->
<!--					title="有无孩子"-->
<!--					is-link-->
<!--					:value="state.pickerDate['有无孩子'].list[form.is_children]"-->
<!--					@click="cellClick('有无孩子')"-->
<!--				/>-->
<!--				<van-cell-->
<!--					title="是否想要孩子"-->
<!--					is-link-->
<!--					:value="state.pickerDate['是否想要孩子'].list[form.want_children]"-->
<!--					@click="cellClick('是否想要孩子')"-->
<!--				/>-->
        <van-cell title="有无孩子" is-link :value="form.is_children" @click="cellClick('有无孩子')" />
        <van-cell title="是否想要孩子" is-link :value="form.want_children" @click="cellClick('是否想要孩子')" />
        <van-cell title="是否有房" is-link :value="form.is_house" @click="cellClick('是否有房')" />
        <van-cell title="是否有车" is-link :value="form.is_car" @click="cellClick('是否有车')" />
			</div>
		</div>

		<div class="card">
			<div class="title"><span class="t_block"></span>恋爱宣言</div>
			<div class="cell_box" style="border-radius: 5px">
				<textarea placeholder="请输入" v-model="form.love_content"></textarea>
			</div>
		</div>

		<div class="card">
			<div class="title"><span class="t_block"></span>择偶条件</div>
			<div class="cell_box" style="border-radius: 5px">
				<textarea placeholder="请输入" v-model="form.choose_spouse"></textarea>
			</div>
		</div>

		<div class="card">
			<div class="title"><span class="t_block"></span>兴趣爱好</div>
			<div class="cell_box" style="border-radius: 5px">
				<textarea placeholder="请输入" v-model="form.hobby"></textarea>
			</div>
		</div>

		<div class="card">
			<div style="display: flex; justify-content: space-between">
				<div class="title"><span class="t_block"></span>上传个人照片</div>
				<div style="font-size: 14px">{{ state.fileList.length }}/9</div>
			</div>
			<div class="cell_box" style="border-radius: 5px">
				<van-uploader
					v-model="state.fileList"
					lazy-load
					:preview-size="['100px', '120px']"
					:max-count="9"
          :after-read="afterRead"
					:before-delete="beforeDelete"
				>
					<img class="add_img" src="@/assets/img/add.png" />
					<template #preview-delete>
						<van-icon name="clear" color="#F0F0EF" size="22px" />
					</template>
				</van-uploader>
			</div>
		</div>
    <p style="font-size: 18px;margin-bottom: 5px;text-align: center;color: #F84B9B;">第一张照片请上传9:16的竖版</p>
    <p style="font-size: 18px;margin-bottom: 5px;text-align: center;color: #F84B9B;">将作为首图展示，否则图片将会变形</p>
    <div class="card" style="display: flex;flex-direction: row;justify-content: center;font-size: 13px;" v-if="!state.isEdit">
      <van-checkbox v-model="state.agreement_btn"></van-checkbox><span style="margin-left: 10px;">我已阅读并同意</span><span @click="navigationTo('agreement','privacy_agreement')" style="color: #F74690;font-size: 13px;">《隐私协议》</span>
    </div>

		<van-button class="submit" size="large" v-debounce="submit">{{ state.isEdit ? '修改' : '提交' }}</van-button>

    <!--修改用户头像-->
    <van-popup style="width: 250px" ref="popupAvatar" :closeable="false" round  v-model:show="showAvatar">
      <div class="avatarArea">
        <div class="title">上传头像</div>
        <van-icon @click="closeShowAvatarPopup" class="icon" name="close" size="30" />
        <div class="img-area">
          <van-uploader
              :multiple="false"
              :max-count="1"
              v-model="state.head_img_url"
              lazy-load
              :after-read="afterReadByHeadImg"
              :before-delete="beforeDeleteByHeadImg" />
        </div>
        <div @click="updateUserHeadImgUrl" class="btn">更新</div>
      </div>
    </van-popup>

    <!-- 注册说明 -->
    <MyDialogBtn v-model:show="state.codeDialogShow" column>
      <template #content>
        <div style="max-height: 50vh; overflow: scroll">
          <div style="margin-bottom: 30px">注册说明</div>
          <p v-html="state.promote_contents" style="font-size: 13px; text-align: left; line-height: 24px"></p>
        </div>
      </template>
      <template #btn>
        <van-button type="primary" @click="state.codeDialogShow = false">确定</van-button>
      </template>
    </MyDialogBtn>

    <!-- 注册内容编辑说明 -->
    <MyDialogBtn v-model:show="state.registerDialogShow" column>
      <template #content>
        <div style="max-height: 50vh; overflow: scroll">
          <div style="margin-bottom: 30px">说明</div>
          <p style="font-size: 16px; text-align: center; line-height: 24px">注册信息尚未保存，确定离开？</p>
        </div>
      </template>
      <template #btn style="flex-direction: row;">
        <van-button type="primary" @click="state.registerDialogShow = false">再看看</van-button>
        <van-button type="success" @click="navigationTo('my')">离开</van-button>
      </template>
    </MyDialogBtn>

    <!-- 上传说明 -->
    <MyDialogBtn v-model:show="state.uploadImageShow" column>
      <template #content>
        <div style="max-height: 50vh; overflow: scroll">
          <div style="margin-bottom: 30px">上传说明</div>
          <p style="font-size: 13px; text-align: left; line-height: 24px">修改相册图片，提交保存后，平台将会对您上传的图片进行审核。</p>
        </div>
      </template>
      <template #btn>
        <van-button type="primary" @click="state.uploadImageShow = false">确定</van-button>
      </template>
    </MyDialogBtn>

		<!-- 选择器弹窗 -->
		<MyPopupPicker ref="popupPickerRef" :popupTitle="state.popupTitle" @popupConfirm="popupConfirm">
			<van-datetime-picker
				v-if="state.currentPickerTitle === '生日'"
				ref="datetimePickerRef"
				type="date"
				v-model="state.birthdayValue"
				:show-toolbar="false"
				:min-date="state.minDate"
				:max-date="state.maxDate"
				@confirm="datetimePickerConfirm"
			/>
			<van-area
				v-else-if="state.currentPickerTitle === '所在地区'"
				:area-list="areaList"
				:value="state.areaDefaultCode"
				@change="areaChange"
			/>
			<van-picker
				v-else
				ref="pickerRef"
				:columns="state.columns"
				:default-index="state.defaultIndex"
				:show-toolbar="false"
				@confirm="pickerConfirm"
			/>
		</MyPopupPicker>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useMainStore } from '@/store';
import { uploadImage, deleteImage, registerUser, editMemberInfo, memberInfo, updateUserAvatar } from '@/api/common';
import type { PickerInstance, PickerOption, AreaColumnOption, DatetimePickerInstance, ToastOptions } from 'vant';
import MyPopupPicker from '@/components/MyPopupPicker.vue';
import MyDialogBtn from '@/components/MyDialogBtn.vue';
import { areaList } from '@vant/area-data';
import { formatDate } from '@/utils/formatTime';
import { verifyPhone } from '@/utils/toolsValidate';
import { Toast,Checkbox } from 'vant';
import wxApiReady from '@/hooks/wxApiReady';
import wx from 'weixin-jsapi';
import showVip from '@/hooks/showVip';
import Compressor from 'compressorjs';

const imgUrl = import.meta.env.VITE_IMG_URL;
const route = useRoute();
const router = useRouter();
const mainStore = useMainStore();
const state = reactive<any>({
  codeDialogShow: false,
  registerDialogShow: false,
  uploadImageShow: false,
  isUploadPopup:false,
  isSubmitInfo:false,
  promote_contents:'①不满18周岁请勿注册\n' +
      '<br/>②填写地址无需精确到具体门牌号，避免暴露个人住址隐私',
  showAvatar:false,
	isEdit: route.query.isEdit || 0,
  isUpdatePhoto:false,
  isDeletePhoto:false,
	birthdayValue: new Date(),
	areaValue: '',
	areaDefaultCode: '110101',
	popupTitle: '',
	minDate: new Date(1950, 0, 17),
	maxDate: new Date(),
  agreement_content:'隐私协议',
  agreement_btn:0,
	form: {
		user_id: mainStore.user_id,
		username: '',
		mobile: '',
		sex: '',
		age: '',
		birthday: '',
		province: '',
		city: '',
		area: '',
		income: '',
		address: '',
		educate: '',
		marriage: '',
		height: '',
		weight: '',
		shape: '',
		is_children: '',
		want_children: '',
    is_car: '',
		is_house: '',
		love_content: '',
		choose_spouse: '',
		hobby: '',
		job: '',
		photo_list: ''
	},
	lng: '',
	lat: '',
	fileList: [],
  head_img_url: [],
	pickerDate: {
		性别: { title: '选择你的性别', key: 'sex', index: 0, list: ['男', '女'] },
		年龄: {
			title: '选择你的年龄',
			key: 'age',
			index: 17,
			list: [
				1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
				31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58,
				59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86,
				87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100
			]
		},
		月收入: {
			title: '选择你的月收入',
			key: 'income',
			index: 0,
			list: ['0~3000', '3000~6000', '6000~8000', '10000~15000', '20000以上']
		},
		学历: {
			title: '选择你的学历',
			key: 'educate',
			index: 0,
			list: ['小学', '初中', '高中', '专科', '本科', '研究生']
		},
		婚姻状况: { title: '选择你的婚姻状况', key: 'marriage', index: 0, list: ['未婚', '离异', '丧偶', '意向红娘', '意向月老'] },
		身高: {
			title: '选择你的身高cm',
			key: 'height',
			index: 30,
			list: [
				140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150, 151, 152, 153, 154, 155, 156, 157, 158, 159, 160, 161,
				162, 163, 164, 165, 166, 167, 168, 169, 170, 171, 172, 173, 174, 175, 176, 177, 178, 179, 180, 181, 182, 183,
				184, 185, 186, 187, 188, 189, 190, 191, 192, 193, 194, 195, 196, 197, 198, 199, 200, 201, 202, 203, 204, 205,
				206, 207, 208, 209, 210, 211, 212, 213, 214, 215, 216, 217, 218, 219, 220, 221, 222, 223, 224, 225, 226, 227,
				228, 229, 230
			]
		},
		体重: {
			title: '选择你的体重kg',
			key: 'weight',
			index: 20,
			list: [
				30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57,
				58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85,
				86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110,
				111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128, 129, 130, 131, 132,
				133, 134, 135, 136, 137, 138, 139, 140, 141, 142, 143, 144, 145, 146, 147, 148, 149, 150
			]
		},
		体型: { title: '选择你的体型', key: 'shape', index: 1, list: ['偏瘦', '正常', '偏胖'] },
		有无孩子: { title: '选择有无孩子', key: 'is_children', index: 0, list: ['无', '有'] },
		是否想要孩子: { title: '选择是否想要孩子', key: 'want_children', index: 0, list: ['不想', '想'] },
    是否有房: { title: '选择是否有房', key: 'is_house', index: 0, list: ['无', '有'] },
    是否有车: { title: '选择是否有车', key: 'is_car', index: 0, list: ['无', '有'] },
	},
	columns: [],
	defaultIndex: 0,
	currentPickerTitle: '',
	imgUrls: []
});
const { form } = toRefs(state);

onMounted(() => {
	if (state.isEdit) {
		setDefaultInfo();
	} else {
    state.codeDialogShow = true
		wxApiReady(['getLocation'])
			.then((res) => {
				wx.getLocation({
					type: 'wgs84',
					success: (res: any) => {
						const { latitude, longitude } = res;
						state.lng = longitude;
						state.lat = latitude;
					}
				});
			})
			.catch((err) => console.log(err));
    // 离开页面提示信息
    router.beforeEach((to, from, next) => {
      console.log(from.path)
      console.log(to.path)
      if (from.name == 'registered' && to.name == 'my') {
        if (!state.isSubmitInfo && state.form.username != '') {//未发送
          if(confirm('注册信息尚未保存，确定离开？')) {
            next()
          }else {
            next(false)
          }
        } else {
          next();
        }
      } else {
        next();
      }
    });
	}
});

let showAvatar = ref<boolean>(false);

// 修改用户头像弹窗开启
const openShowAvatarPopup = () => {
  showAvatar.value = true
}

const uploadRequestFunc = (file:any) => {
  return new Promise((resolve, reject) => {
    // compressorjs 默认开启 checkOrientation 选项
    // 会将图片修正为正确方向
    new Compressor(file, {
      quality: 0.4,
      success(result) {
        let files = new File([result], file.name, { type: file.type })
        resolve(files)
      },
      error(err) {
        console.log(err.message);
        reject(err);
      },
    });
  });
};

// 修改用户头像弹窗关闭
const closeShowAvatarPopup = () => {
  let head_img_url = state.head_img_url;
  if (head_img_url.length && (head_img_url[0].url2 != "" || head_img_url[0].url2 != null)) {
    beforeDelete(head_img_url[0]);
  }
  showAvatar.value = false
}

// 更新用户头像
const updateUserHeadImgUrl = async () => {
  let form = {
    id:mainStore.user_id,
    head_img_url:''
  };
  if (state.head_img_url.length) {
    const urls = state.head_img_url.map((item: any) => imgUrl + item.url2);
    form.head_img_url = urls.join(',');
  } else {
    return Toast('请上传头像');
  }
  const res = await updateUserAvatar(form)
  if (res.errorCode == 0) {
    const userRes = await memberInfo(mainStore.user_id);
    if (userRes.data) {
    	mainStore.userInfo = userRes.data;
    }
  } else {
    return Toast('更新失败');
  }
  showAvatar.value = false
}

// 导航跳转
const navigationTo = (name: string, type?: string): void => {
  router.push({ name , query: { type }});
};

const submit = async (): Promise<void | ToastOptions> => {
  if (!state.isEdit) {//注册前，用户必须勾选隐私协议
    if (state.agreement_btn == '0') return Toast('请阅读并勾选隐私协议');
  }
	const { form } = state;
	if (!form.username.trim()) return Toast('请输入姓名');
	if (!state.my_mobile.trim()) return Toast('请输入电话');
	if (!verifyPhone(state.my_mobile.trim())) return Toast('电话格式不正确');
	if (!form.sex) return Toast('请选择性别');
	if (!form.age) return Toast('请选择年龄');
	if (!form.birthday) return Toast('请选择生日');
	if (!form.income) return Toast('请选择月收入');
	if (!state.areaValue) return Toast('请选择所在地区');
	if (!form.address) return Toast('请输入详细地址');
	if (!form.job.trim()) return Toast('请输入职业');
	if (!form.educate) return Toast('请选择学历');
	if (!form.marriage) return Toast('请选择婚姻状况');
	if (!form.height) return Toast('请选择身高');
	if (!form.weight) return Toast('请选择体重');
	//if (!form.shape) return Toast('请选择体型');
	if (form.is_children === '') return Toast('请选择有无孩子');
	if (form.want_children === '') return Toast('请选择是否想要孩子');
	if (form.is_house === '') return Toast('请选择是否有房');
	if (form.is_car === '') return Toast('请选择是否有车');

  if (state.isUpdatePhoto) {//当用户修改或者添加新图片则后台需要审核。
    form.audit_state = 0;
    form.audit_msg = '';
    form.audit_time = '';
  }
  form.isUpdatePhoto = 0;
  if (state.isDeletePhoto) {
    form.isUpdatePhoto = state.isDeletePhoto?1:0;
  }

	state.form.mobile = state.my_mobile;
	if (state.fileList.length) {
		const urls = state.fileList.map((item: any) => item.url2);
		form.photo_list = urls.join(',');
	} else {
    return Toast('请上传个人照片');
  }

  state.form.lng = state.lng;
  state.form.lat = state.lat;
  console.log(state.form);
	// 修改个人信息
	if (state.isEdit) {
		const res = await editMemberInfo(state.form);
		Toast.success(res.errorInfo);
		setTimeout(() => {
			router.go(-1);
		}, 2000);
	} else {
		// 注册
		const res = await registerUser(state.form);
    if (res.errorCode == 0) {
      state.isSubmitInfo = true;
    }
		Toast.success(res.errorInfo);
    setTimeout(() => {
      navigationTo('my')
    }, 2000);
	}
};

// 城市改变
const areaChange = (areaColumn: AreaColumnOption[]) => {
	const province = areaColumn[0].name;
	const city = areaColumn[1].name;
	const area = areaColumn[2].name;
	state.areaValue = province + city + area;
	Object.assign(state.form, { province, city, area });
};

// 生日picker确认方法
const datetimePickerConfirm = (currentValue: PickerOption | PickerOption[], currentIndex: number | number[]) => {
	state.form.birthday = formatDate(new Date(state.birthdayValue), 'YYYY-mm-dd');
};

// picker确认方法
const pickerConfirm = (currentValue: PickerOption | PickerOption[], currentIndex: number | number[]) => {
	const pickerDate = state.pickerDate[state.currentPickerTitle];
	state.form[pickerDate.key] = currentValue;
	pickerDate.index = currentIndex;
};

// picker确认按钮
const datetimePickerRef = ref<DatetimePickerInstance | null>(null);
const pickerRef = ref<PickerInstance | null>(null);
const popupConfirm = (): void => {
	if (state.currentPickerTitle === '生日') {
		datetimePickerRef.value?.getPicker().confirm();
	}
	if (state.currentPickerTitle === '所在地区' && !state.areaValue) {
		// 城市默认值
		state.form.province = '北京市';
		state.form.city = '北京市';
		state.form.area = '东城区';
		state.areaValue = '北京市北京市东城区';
		return;
	}
	pickerRef.value?.confirm();
};

// 选项点击
const popupPickerRef = ref<InstanceType<typeof MyPopupPicker> | null>(null);
const cellClick = (title: string): void => {
	state.currentPickerTitle = title;

	if (title === '生日' || title === '所在地区') {
		state.popupTitle = `选择你的${title}`;
		popupPickerRef.value!.show();
		return;
	}

	const currentPicker = state.pickerDate[title];
	state.popupTitle = currentPicker.title;

	// 选择器内容
	state.columns = currentPicker.list;

	// 选择器默认索引
	state.defaultIndex = currentPicker.index;
	popupPickerRef.value!.show();
};

// 上传图片
const afterRead = async (file: any, { index }: any) => {
  let newFile = await uploadRequestFunc(file.file)
	const res = await uploadImage(newFile);
	state.fileList[index].url2 = res.data;
  state.isUpdatePhoto = true;
  if (state.isEdit && !state.isUploadPopup) {
    state.uploadImageShow = true;
    state.isUploadPopup = true;
  }
};
// 上传头像
const afterReadByHeadImg = async (file: any, { index }: any) => {
  let newFile = await uploadRequestFunc(file.file)
	const res = await uploadImage(newFile);
  state.head_img_url[index].url2 = res.data;
};
// 删除图片
const beforeDelete = async (file: any): Promise<boolean> => {
  if (state.fileList.length <= 1) {
    Toast('不能删除');
    return false;
  }
  if (state.fileList[0].url2 == file.url2) {
    console.log(file.url2)
    console.log(state.fileList[0].url2)
    state.isDeletePhoto = true;
    return true;
  }
	await deleteImage(file.url2);
	return true;
};
// 删除头像
const beforeDeleteByHeadImg = async (file: any): Promise<boolean> => {
	await deleteImage(file.url2);
	return true;
};

// 设置修改默认信息
const setDefaultInfo = async () => {
	const { data: res } = await memberInfo(mainStore.user_id);
  if (res.is_children == '0' || res.is_children == '1') {
    if (res.is_children == '0') res.is_children = '无'
    if (res.is_children == '1') res.is_children = '有'
  }
  if (res.want_children == '0' || res.want_children == '1') {
    if (res.want_children == '0') res.want_children = '不想'
    if (res.want_children == '1') res.want_children = '想'
  }
	state.form.username = res.username;
	state.form.mobile = res.mobile;
	state.my_mobile = res.my_mobile;
	state.form.sex = res.sex;
	state.form.age = res.age;
	state.form.birthday = res.birthday;
	state.form.province = res.province;
	state.form.city = res.city;
	state.form.area = res.area;
	state.form.income = res.income;
	state.form.address = res.address;
	state.form.educate = res.educate;
	state.form.marriage = res.marriage;
	state.form.height = res.height;
	state.form.weight = res.weight;
	state.form.shape = res.shape;
	state.form.is_children = res.is_children;
	state.form.want_children = res.want_children;
	state.form.is_house = res.is_house;
	state.form.is_car = res.is_car;
	state.form.love_content = res.love_content;
	state.form.choose_spouse = res.choose_spouse;
	state.form.hobby = res.hobby;
	state.form.job = res.job;
	state.form.photo_list = res.photo_list;

	state.fileList = res.photo_list.map((item: any) => {
		return { url: imgUrl + item, url2: item };
	});

	// 设置默认城市
	const county_list: any = areaList.county_list;
	state.areaDefaultCode = Object.keys(county_list).find((key) => {
		return county_list[key] === res.area;
	});
	state.areaValue = res.province + res.city + res.area;
	// 出生日期
	state.birthdayValue = new Date(res.birthday);

	// 选择器默认索引
	setPickerDefaultIndex([
		{
			key: '性别',
			value: res.sex
		},
		{
			key: '年龄',
			value: res.age
		},
		{
			key: '月收入',
			value: res.income
		},
		{
			key: '学历',
			value: res.educate
		},
		{
			key: '婚姻状况',
			value: res.marriage
		},
		{
			key: '身高',
			value: res.height
		},
		{
			key: '体重',
			value: res.weight
		},
		{
			key: '体型',
			value: res.shape
		}
	]);
};

const setPickerDefaultIndex = (list: any[]) => {
	list.map((item) => {
		const pickerData = state.pickerDate[item.key];
		const index: number = pickerData.list.findIndex((key: string) => key == item.value);
		if (index !== -1) {
			state.pickerDate[item.key].index = index;
		}
	});
};


</script>

<style lang="scss" scoped>
:deep(.van-area) {
	.van-picker__toolbar {
		display: none;
	}
}
:deep(.van-uploader) {
	width: 100%;

	.van-uploader__wrapper {
		width: 100%;
		display: flex;
		flex-wrap: wrap;

		.van-uploader__preview,
		.van-uploader__input-wrapper {
			@include flx-center;
			width: 33%;
			margin: 0;
			margin-bottom: 20px;
			.van-uploader__preview-image {
				width: 100%;
				border-radius: 7px;
			}
			.van-uploader__preview-delete {
				top: 5px;
				right: 12%;
			}
		}
		img {
			object-fit: cover;
		}
	}
}
:deep(.van-radio) {
  .van-radio__icon--round {
    font-size: 13px;
  }
  .van-radio__label {
    color: #F74690;
  }
}
:deep(.van-checkbox) {
  .van-checkbox__icon {
    font-size: 13px;
  }
  .van-checkbox__icon--checked .van-icon {
    background-color: #F74690;
    border-color: #F74690;
  }
  .van-checkbox__icon .van-icon {
    border-color: #F74690;
  }
}
.add_img {
	width: 100px;
	height: 120px;
	object-fit: cover !important;
}

.edit {
	background: #f5f5f5;
	.card {
		.cell_box {
			:deep(.van-cell) {
				background: white !important;
			}
		}
	}
	textarea {
		background: white !important;
	}
}

.registered {
	padding-bottom: env(safe-area-inset-bottom);
	header {
		@include flx-direction-between;
		width: 100%;
		height: 225px;
		box-sizing: border-box;
		padding: 58px 15px 0 15px;
		background-image: url('@/assets/img/registered_bg.png');
		background-repeat: no-repeat;
		background-size: cover;

		.user_info {
			@include flx-direction-between;
			font-size: 13px;
			color: #666666;
			.name {
				margin-bottom: 10px;
				color: #1a1a1a;
				font-size: 21px;
				font-weight: bold;
			}
		}
	}

	.card {
		padding: 15px;
		.title {
			margin-bottom: 15px;
			color: #1a1a1a;
			font-size: 15px;
			font-weight: bold;
		}
		.cell_box {
			overflow: hidden;
			border-radius: 10px;
			.van-cell--clickable:active {
				background: #e6e6e6;
			}
			:deep(.van-cell) {
				height: 55px;
				line-height: 55px;
				padding: 0 15px;
				background: #f7f7f7;
				&::after {
					border-bottom: 1px solid #e6e6e6;
				}

				.van-cell__title {
					color: #3b3b3b;
				}
				.van-field__control {
					color: #aaaeb3;
				}
				.van-badge__wrapper {
					line-height: 55px;
				}
			}
		}
	}

	textarea {
		width: 100%;
		height: 100px;
		box-sizing: border-box;
		padding: 15px;
		color: #999999;
		font-size: 13px;
		line-height: 20px;
		border: none;
		background: #f7f7f7;
		resize: none;
	}
	.submit {
		@include flx-center;
		width: 100%;
		min-height: 55px;
		color: #fbfbfb;
		font-size: 17px;
		border: none;
		background: linear-gradient(91deg, #f53d7d, #fb56b3);
	}
}
.avatarArea {
  padding: 20px;
  text-align: center;
  position: relative;
  .title {
    margin-right: 15px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .icon {
    position: absolute;
    right: 10px;
    top: 10px;
  }
  .img-area {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 20px;

    :deep(.van-uploader) {
      width: unset !important;
      .van-uploader__wrapper {
        width: unset;
        display: flex;
        flex-wrap: wrap;

        .van-uploader__preview,
        .van-uploader__input-wrapper {
          @include flx-center;
          width: unset;
          margin: 0;
          .van-uploader__preview-image {
            width: 80px;
            height: 80px;
            border-radius: unset;
            display: block;
            overflow: hidden;
          }
          .van-uploader__preview-delete {
            top: 0;
            right: 0;
          }
        }
      }
    }
  }
  .btn {
    display: inline-block;
    width: 100px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: white;
    border-radius: 50px;
    font-size: 14px;
    margin-top: 20px;
    border: none;
    background: linear-gradient(91deg, #f53d7d, #fb56b3);
  }
}

.top {
	@include flx-align-center;
	height: 130px;
	padding: 0 15px;
	background: white;
  .update {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 25px;
    line-height: 25px;
    text-align: center;
    color: white;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.4);
  }
	.user_info {
		@include flx-direction-between;
		margin-left: 15px;
		font-size: 12px;
		div {
			@include flx-align-center;
			margin-bottom: 8px;
			.vip {
				width: 16px;
				height: 14px;
				margin-left: 10px;
			}
			.certification {
				width: 54px;
				height: 20px;
				margin-left: 10px;
			}
		}
		.name {
			font-size: 18px;
			font-weight: bold;
		}
	}
}
</style>
